<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/datil.css">
</head>
<body>
    <div id="xiang">
        <!-- <div class="qing">
            <div class="left">
                <img src="./img/1_03.jpg" alt="">
            </div>
            <div class="right">
                <div class="shang">
                    <h1>HUAWEI Mate 30 5G全网通8GB+ 128GB麒詩990 4000万超感光徕卡仨<br />
                        摄(亮黑色)
                    </h1>
                    <p>
                    <em>
                        ①享6期免息2国量德精关配件Q整点限量增好扎国以旧控新立省100元国老用户加赠半年延保点击购<br />
                        买》》》
                    </em>
                    <span> &nbsp&nbsp麒麟990G旗规SoC芯片，支持双模SANSA;超感光徐卡三摄; 40W有线与27W无线双超级快</span>
                    </p>
                </div>
                <div class="xia">
                    <li class="li01">
                        <dd>价 &nbsp&nbsp格</dd>
                        <dd>&nbsp&nbsp￥4499.00</dd>
                    </li>
                    <div class="down">
                        <dd> 促 &nbsp&nbsp销</dd>
                        <ul>
                            <li>
                                <span>赠品</span>
                            </li>
                            <li>
                                <span>一站式换新</span>
                                <p>站式换新门 APP专享.最高补贴550元</p>
                            </li>
                            <li>
                                <span>整点赠送</span>
                                <p>[整点壇送 0点10点/16点/20点下单前100名赠二鼻架白拍杆(Mase 30系列共享)</p>
                            </li>
                            <li>
                                <span>老用户专享</span>
                                <span>分期免息</span>
                                <span>赠送积分</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    
</body>
</html>
<script src="./js/data.js"></script>
<script>
    //获取url参数
    var p = location.search
    //获取？后面的数据
    p=p.substring(1)
    //字符串分割成数组
    var arr=p.split("=")    
    var obj ={}
    obj[arr[0]]=arr[1]
    var res =list2.filter(function(item,index){
        return item.id==obj.id
    })
    console.log(res);
    var res1=list2.map(function(item,index){
        if(item.id==obj.id){
            return xiang.innerHTML=`
            <div class="qing">
            <div class="left">
                <img src=${item.urlimg} alt="">
            </div>
            <div class="right">
                <div class="shang">
                    <h1>${item.txt}
                    </h1>
                    <p>
                    <em>
                        ${item.emm}
                    </em>
                    <span> ${item.span1}</span>
                    </p>
                </div>
                <div class="xia">
                    <li class="li01">
                        <dd>${item.dd1}</dd>
                        <dd>${item.dd2}</dd>
                    </li>
                    <div class="down">
                        <dd>${item.dd3}</dd>
                        <ul>
                            <li>
                                <span>${item.span2}</span>
                            </li>
                            <li>
                                <span>${item.span3}</span>
                                <p>${item.pp1}</p>
                            </li>
                            <li>
                                <span>${item.span4}</span>
                                <p>${item.pp2}</p>
                            </li>
                            <li>
                                <span>${item.span5}</span>
                                <span>${item.span6}</span>
                                <span>${item.span7}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
            `
        }
    })
</script>